<template>
    <el-row class="container">
        <!-- 头部 -->
        <el-col :span="24" class="header">
            <el-col :span="10" class="logo">{{ sysName }}</el-col>
            <el-col :span="10"><!-- 中间 --></el-col>
            <el-col :span="4" class="userinfo">
                <el-dropdown trigger="hover">
                    <span class="el-dropdown-link userinfo-inner">
                        <img src="../assets/touxiang.jpg" />
                        {{ sysUserName }}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>我的消息</el-dropdown-item>
                        <el-dropdown-item>设置</el-dropdown-item>
                        <el-dropdown-item>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-col>
        <!-- 主内容区 -->
        <el-col :span="24" class="main">
            <aside>
                <el-radio-group v-model="isCollapse" style="margin-bottom: 1.25rem;">
                    <el-radio-button :laber="false">展开</el-radio-button>
                    <el-radio-button :label="true">收起</el-radio-button>
                </el-radio-group>
                <!-- 导航菜单 -->
                <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                    <template v-for="(item, index) in activeRoutes">
                        <el-submenu :index="index + ''" v-if="!item.leaf" :key="item.name">
                            <template slot="title">
                                <i :class="item.iconCls"></i>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path">{{ child.name }}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <!--                        <el-menu-item v-if="item.leaf && item.children.length > 0" :index="item.children[0].path" :key="item.name">
                            <i :class="item.iconCls"></i>
                            {{ item.children[0].name }}
                        </el-menu-item> -->
                    </template>
                </el-menu>
            </aside>
            <section class="content-container">
                <div class="grid-content bg-purple-light">
                    <el-col :span="24" class="breadcrumb-container">
                        <!-- 面包屑导航 -->
                        <strong class="title">{{ $route.name }}</strong>
                        <el-breadcrumb separator="/" class="breadcrumb-inner">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">{{ item.name }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                    <el-col :span="24" class="content-wrapper">
                        <transition name="fade" mode="out-in"><router-view></router-view></transition>
                    </el-col>
                </div>
            </section>
        </el-col>
    </el-row>
</template>

<script>
export default {
    data() {
        return {
            sysName: '这是一个标题栏',
            isCollapse: false,
            sysUserName: 'Admin',
            sysUserAvatar: '',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            }
        };
    },
    computed: {
        activeRoutes: function() {
            // 使用filter过滤数组中hiden = true的项
            var routeList = this.$router.options.routes.filter(item => !item.hidden);
            for (var i = 0; i < routeList.length; i++) {
                //判断子节点是否为空
                var child = routeList[i].children;
                if (child != undefined) {
                    for (var j = 0; j < child.length; j++) {
                        if (child[j].hidden) {
                            child.splice(j, 1);
                        }
                    }
                }
            }
            return routeList;
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
};
</script>

<style scoped lang="scss">
.container {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    width: 100%;

    .header {
        height: 3.75rem;
        line-height: 3.75rem;
        background: gainsboro;
        color: #bb1166;

        .userinfo {
            text-align: right;
            padding-right: 2.1875rem;
            float: right;

            .userinfo-inner {
                cursor: pointer;
                color: #000000;

                img {
                    width: 2.5rem;
                    height: 2.5rem;
                    border-radius: 1.25rem;
                    margin: 0.625rem 0rem 0.625rem 0.625rem;
                    float: right;
                }
            }
        }
    }

    .main {
        display: flex;
        position: absolute;
        top: 3.75rem;
        bottom: 0rem;
        overflow: hidden;

        aside {
            flex: 0 0 14.375rem;
            width: 14.375rem;

            .el-menu {
                height: 100%;
            }
            .collapsed {
                width: 60px;

                .item {
                    position: relative;
                }

                .submenu {
                    position: absolute;
                    top: 0px;
                    left: 60px;
                    z-index: 99999;
                    height: auto;
                    display: none;
                }
            }
        }

        .menu-collapsed {
            flex: 0 0 60px;
            width: 60px;
        }

        .menu-expanded {
            flex: 0 0 230px;
            wigrid-contentdth: 230px;
        }
        .content-container {
            // background: #f1f2f7;
            flex: 1;
            // position: absolute;
            // right: 0px;
            // top: 0px;
            // bottom: 0px;
            // left: 230px;
            overflow-y: scroll;
            padding: 20px;

            .breadcrumb-container {
                //margin-bottom: 15px;
                .title {
                    width: 200px;
                    float: left;
                    color: #475669;
                }

                .breadcrumb-inner {
                    float: right;
                }
            }

            .content-wrapper {
                background-color: #fff;
                box-sizing: border-box;
            }
        }
    }
}
</style>
